<template>
  <view class="container">
    <view class="header">
      <view class="title">中医体质辨识测试</view>
      <view class="subtitle">《中华中医药学会体质分类与判定标准》</view>
    </view>

    <block v-if="!showResult">
      <view class="progress-bar">
        <view class="progress-text">{{ currentType.name }}（{{ currentTypeIndex + 1 }}/{{ constitutionTypes.length }}）</view>
        <view class="progress-track">
        <view 
            class="progress-fill"
            :style="{ width: `${((currentTypeIndex + 1) / constitutionTypes.length) * 100}%` }"
        ></view>
      </view>
      </view>
      
      <view class="type-description">
        <text>{{ currentType.description }}</text>
      </view>
      
      <view class="questions-list">
          <view 
          v-for="question in currentQuestions" 
          :key="question.id"
          class="question-item"
        >
          <view class="question-text">{{ question.id }}. {{ question.text }}</view>
          <view class="answer-options">
            <view 
              v-for="option in options" 
              :key="option.score"
              class="answer-option"
              :class="{ 'selected': answers[currentType.id] && answers[currentType.id][question.id] === option.score }"
              @click="selectAnswer(question.id, option.score)"
            >
              <view class="option-circle">
                <view v-if="answers[currentType.id] && answers[currentType.id][question.id] === option.score" class="option-inner"></view>
              </view>
              <view class="option-text">{{ option.text }}</view>
          </view>
        </view>
      </view>
    </view>
    
      <view class="action-buttons">
        <button 
          v-if="currentTypeIndex > 0" 
          class="prev-btn" 
          @click="prevType"
        >上一类</button>
        <button 
          class="next-btn" 
          @click="nextType"
        >{{ currentTypeIndex < constitutionTypes.length - 1 ? '下一类' : '提交测试' }}</button>
      </view>
    </block>
    
    <block v-else>
      <view class="result-header">
        <view class="result-title">体质辨识结果</view>
      </view>

      <view v-if="(!mainConstitutions || mainConstitutions.length === 0) && (!tendencyConstitutions || tendencyConstitutions.length === 0)" class="main-result">
        <text>无体质倾向</text>
      </view>
      
      <view v-else class="main-result">
        <view v-if="mainConstitutions && mainConstitutions.length > 0" class="result-type">您的主要体质类型是：</view>
        <view v-if="mainConstitutions && mainConstitutions.length > 0" class="result-names">
          <text 
            v-for="(item, index) in mainConstitutions" 
            :key="item.id"
            class="main-item"
          >{{ item.name }}{{ index < mainConstitutions.length - 1 ? '、' : '' }}</text>
        </view>
        
        <view v-if="tendencyConstitutions && tendencyConstitutions.length > 0" class="tendency-constitutions">
          <text>倾向体质：</text>
          <view class="tendency-list">
            <text 
              v-for="(item, index) in tendencyConstitutions" 
              :key="item.id"
              class="tendency-item"
            >{{ item.name }}{{ index < tendencyConstitutions.length - 1 ? '、' : '' }}</text>
          </view>
        </view>
      </view>
      
      <view v-if="(mainConstitutions && mainConstitutions.length > 0) || (tendencyConstitutions && tendencyConstitutions.length > 0)" class="result-advice">
        <view class="advice-title">调理建议</view>
        <view v-if="mainConstitutions && mainConstitutions.length > 0" class="advice-content main-advice">
          <view 
            v-for="item in mainConstitutions" 
            :key="item.id"
            class="main-advice-item"
          >
            <view class="main-name">{{ item.name }}：</view>
            <view>{{ constitutionAdvice[item.id] }}</view>
          </view>
        </view>
        
        <view v-if="tendencyConstitutions && tendencyConstitutions.length > 0" class="advice-content tendency-advice">
          <view class="tendency-title">倾向体质调理：</view>
          <view 
            v-for="item in tendencyConstitutions" 
            :key="item.id"
            class="tendency-advice-item"
          >
            <view class="tendency-name">{{ item.name }}：</view>
            <view>{{ constitutionAdvice[item.id] }}</view>
          </view>
        </view>
      </view>
        
      <view class="result-details">
        <view class="details-title">各体质类型得分</view>
        <view class="score-list">
          <view 
            v-for="result in constitutionResults" 
            :key="result.id"
            class="score-item"
            :class="{ 'highlight': result.id === mainConstitution.id || (tendencyConstitution && result.id === tendencyConstitution.id) }"
          >
            <view class="score-name">{{ result.name }}</view>
            <view class="score-value">{{ result.score }}</view>
            <view class="score-result">{{ result.result }}</view>
          </view>
        </view>
      </view>
      
      <view class="action-buttons">
        <button class="restart-btn" @click="restartTest">重新测试</button>
        <button class="finish-btn" @click="finishTest">完成</button>
      </view>
    </block>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 预定义答案选项
const options = [
  { score: 1, text: '没有（根本不）' },
  { score: 2, text: '很少（有一点）' },
  { score: 3, text: '有时（有些）' },
  { score: 4, text: '经常（相当）' },
  { score: 5, text: '总是（非常）' }
]

// 九种体质类型
const constitutionTypes = [
  { id: 'pinghe', name: '平和质', questions: 8, description: '阴阳气血调和，脏腑功能正常，体形匀称健壮，面色红润，精力充沛' },
  { id: 'qixu', name: '气虚质', questions: 8, description: '元气不足，常表现为疲乏无力，气短懒言，容易出汗' },
  { id: 'yangxu', name: '阳虚质', questions: 7, description: '阳气不足，常表现为怕冷，手脚发凉，面色苍白，喜热饮食' },
  { id: 'yinxu', name: '阴虚质', questions: 8, description: '阴液亏少，常表现为手足心热，口干咽燥，皮肤干燥，容易烦躁' },
  { id: 'tanshi', name: '痰湿质', questions: 8, description: '体内水湿停滞，常表现为体形肥胖，腹部松软，容易疲倦，舌苔厚腻' },
  { id: 'shire', name: '湿热质', questions: 7, description: '湿热内蕴，常表现为面垢油光，易生痤疮，口苦口臭，小便黄赤' },
  { id: 'xueyu', name: '血瘀质', questions: 7, description: '血行不畅，常表现为肤色晦暗，唇色偏暗，容易有瘀斑，记忆力减退' },
  { id: 'qiyu', name: '气郁质', questions: 7, description: '气机郁滞，常表现为情绪波动大，容易焦虑抑郁，胸胁胀闷，喜欢叹气' },
  { id: 'tebing', name: '特禀质', questions: 7, description: '先天因素影响，常表现为对某些物质过敏，容易发生皮肤瘙痒，哮喘等症状' }
]

// 问卷内容
const questionsList = {
  pinghe: [
    { id: 1, text: '您精力充沛吗？', inverse: false },
    { id: 2, text: '您容易疲乏吗？', inverse: true },
    { id: 3, text: '您说话声音低弱无力吗？', inverse: true },
    { id: 4, text: '您感到闷闷不乐、情绪低沉吗？', inverse: true },
    { id: 5, text: '您比一般人耐受不了寒冷（冬天的寒冷，夏天的冷空调、电扇等）吗？', inverse: true },
    { id: 6, text: '您能适应外界自然和社会环境的变化吗？', inverse: false },
    { id: 7, text: '您容易失眠吗？', inverse: true },
    { id: 8, text: '您容易忘事（健忘）吗？', inverse: true }
  ],
  qixu: [
    { id: 1, text: '您容易疲乏吗？', inverse: false },
    { id: 2, text: '您容易气短（呼吸短促，接不上气）吗？', inverse: false },
    { id: 3, text: '您容易心慌吗？', inverse: false },
    { id: 4, text: '您容易头晕或站起时晕眩吗？', inverse: false },
    { id: 5, text: '您比别人容易感冒吗？', inverse: false },
    { id: 6, text: '您喜欢安静、懒得说话吗？', inverse: false },
    { id: 7, text: '您说话声音低弱无力吗？', inverse: false },
    { id: 8, text: '您活动量稍大就容易出虚汗吗？', inverse: false }
  ],
  yangxu: [
    { id: 1, text: '您手脚发凉吗？', inverse: false },
    { id: 2, text: '您胃脘部、背部或腰膝部怕冷吗？', inverse: false },
    { id: 3, text: '您感到怕冷、衣服比别人穿得多吗？', inverse: false },
    { id: 4, text: '您冬天更怕冷，夏天不喜欢吹电扇、空调吗？', inverse: false },
    { id: 5, text: '您比别人容易患感冒吗？', inverse: false },
    { id: 6, text: '您吃（喝）凉的东西会感到不舒服或怕吃（喝）凉的吗？', inverse: false },
    { id: 7, text: '您受凉或吃（喝）凉的东西后，容易腹泻、拉肚子吗？', inverse: false }
  ],
  yinxu: [
    { id: 1, text: '您感到手脚心发热吗？', inverse: false },
    { id: 2, text: '您感觉身体、脸上发热吗？', inverse: false },
    { id: 3, text: '您皮肤或口唇干吗？', inverse: false },
    { id: 4, text: '您口唇的颜色比一般人红吗？', inverse: false },
    { id: 5, text: '您容易便秘或大便干燥吗？', inverse: false },
    { id: 6, text: '您面部两颧潮红或偏红吗？', inverse: false },
    { id: 7, text: '您感到眼睛干涩吗？', inverse: false },
    { id: 8, text: '您感到口干咽燥、总想喝水吗？', inverse: false }
  ],
  tanshi: [
    { id: 1, text: '您感到胸闷或腹部胀满吗？', inverse: false },
    { id: 2, text: '您感到身体沉重不轻松或不爽快吗？', inverse: false },
    { id: 3, text: '您腹部肥满松软吗？', inverse: false },
    { id: 4, text: '您有额部油脂分泌多的现象吗？', inverse: false },
    { id: 5, text: '您上眼睑比别人肿（上眼睑有轻微隆起的现象）吗？', inverse: false },
    { id: 6, text: '您嘴里有黏黏的感觉吗？', inverse: false },
    { id: 7, text: '您平时痰多，特别是感到咽喉部总有痰堵着吗？', inverse: false },
    { id: 8, text: '您舌苔厚腻或有舌苔厚厚的感觉吗？', inverse: false }
  ],
  shire: [
    { id: 1, text: '您面部或鼻部有油腻感或者油亮发光吗？', inverse: false },
    { id: 2, text: '您脸上容易生痤疮或皮肤容易生疮疖吗？', inverse: false },
    { id: 3, text: '您感到口苦或嘴里有异味吗？', inverse: false },
    { id: 4, text: '您大便黏滞不爽、有解不尽的感觉吗？', inverse: false },
    { id: 5, text: '您小便时尿道有发热感、尿色浓（深）吗？', inverse: false },
    { id: 6, text: '您带下色黄（白带颜色发黄）吗？（限女性回答）', inverse: false },
    { id: 7, text: '您的阴囊潮湿吗？（限男性回答）', inverse: false }
  ],
  xueyu: [
    { id: 1, text: '您的皮肤在不知不觉中会出现青紫瘀斑（皮下出血）吗？', inverse: false },
    { id: 2, text: '您的两颧部有细微血丝吗？', inverse: false },
    { id: 3, text: '您身体上有哪里疼痛吗？', inverse: false },
    { id: 4, text: '您面色晦黯或容易出现褐斑吗？', inverse: false },
    { id: 5, text: '您会出现黑眼圈吗？', inverse: false },
    { id: 6, text: '您容易忘事（健忘）吗？', inverse: false },
    { id: 7, text: '您口唇颜色偏黯吗？', inverse: false }
  ],
  qiyu: [
    { id: 1, text: '您感到闷闷不乐、情绪低沉吗？', inverse: false },
    { id: 2, text: '您精神紧张、焦虑不安吗？', inverse: false },
    { id: 3, text: '您多愁善感、感情脆弱吗？', inverse: false },
    { id: 4, text: '您容易感到害怕或受到惊吓吗？', inverse: false },
    { id: 5, text: '您胁肋部或乳房胀痛吗？', inverse: false },
    { id: 6, text: '您无缘无故叹气吗？', inverse: false },
    { id: 7, text: '您咽喉部有异物感，且吐之不出、咽之不下吗？', inverse: false }
  ],
  tebing: [
    { id: 1, text: '您没有感冒也会打喷嚏吗？', inverse: false },
    { id: 2, text: '您没有感冒也会鼻塞、流鼻涕吗？', inverse: false },
    { id: 3, text: '您有因季节变化、温度变化或异味等原因而咳喘的现象吗？', inverse: false },
    { id: 4, text: '您容易过敏（药物、食物、气味、花粉、季节交替时、气候变化等）吗？', inverse: false },
    { id: 5, text: '您的皮肤起荨麻疹（风团、风疹块、风疙瘩）吗？', inverse: false },
    { id: 6, text: '您的皮肤因过敏出现过紫癜（紫红色瘀点、瘀斑）吗？', inverse: false },
    { id: 7, text: '您的皮肤一抓就红，并出现抓痕吗？', inverse: false }
  ]
}

// 体质调理建议
const constitutionAdvice = {
  pinghe: '饮食有节制，不要常吃过冷过热或不干净的食物，粗细粮食要合理搭配。',
  qixu: '多食用具有益气健脾作用的食物，如黄豆、白扁豆、鸡肉等。少食空心菜、生萝卜等。',
  yangxu: '平时可多食牛肉、羊肉等温阳之品，少食梨、西瓜、荸荠等生冷寒凉食物，少饮绿茶。',
  yinxu: '多食瘦猪肉、鸭肉、绿豆、冬瓜等甘凉滋润之品，少食羊肉、韭菜、辣椒、葵花子等性温燥烈之品。适合太极拳、太极剑、气功等项目。',
  tanshi: '饮食应以清淡为主，可多食冬瓜等。因体形肥胖，易于困倦，故应根据自己的具体情况循序渐进，长期坚持运动锻炼。',
  shire: '饮食以清淡为主，可多食赤小豆、绿豆、芹菜、黄瓜、藕等甘寒的食物。适合中长跑、游泳、爬山、各种球类、武术等。',
  xueyu: '多食山楂、醋、玫瑰花等，少食肥肉等滋腻之品。可参加各种舞蹈、步行健身法、徒手健身操等。',
  qiyu: '多食黄花菜、海带、山楂、玫瑰花等具有行气、解郁、消食、醒神作用的食物。气郁体质的人不要总待在家里，要多参加群众性的体育运动项目。',
  tebing: '多食益气固表的食物，少食荞麦(含致敏物质荞麦荧光素)、蚕豆等。居室宜通风良好。保持室内清洁，被褥、床单要经常洗晒，可防止对尘螨过敏。'
}

// 当前体质测试状态
const currentTypeIndex = ref(0)
const currentType = computed(() => constitutionTypes[currentTypeIndex.value])
const currentQuestions = computed(() => questionsList[currentType.value.id])
const answers = reactive({})
const showResult = ref(false)
const testCompleted = ref(false)
const constitutionResults = ref([])
const mainConstitutions = ref([])
const mainConstitution = ref({})
const tendencyConstitution = ref(null)
const tendencyConstitutions = ref([])

// 初始化所有答案
function initializeAnswers() {
  constitutionTypes.forEach(type => {
    answers[type.id] = {}
    questionsList[type.id].forEach(question => {
      answers[type.id][question.id] = 0
    })
  })
}

// 在组件挂载时初始化
onMounted(() => {
  initializeAnswers()
})

// 选择答案
function selectAnswer(questionId, score) {
  if (!answers[currentType.value.id]) {
    answers[currentType.value.id] = {}
  }
  answers[currentType.value.id][questionId] = score
}

// 判断当前问题是否已回答
function isAnswered(questionId) {
  return answers[currentType.value.id] && answers[currentType.value.id][questionId] > 0
}

// 检查当前体质类型是否已完成回答
function isCurrentTypeCompleted() {
  if (!answers[currentType.value.id]) {
    return false
  }
  
  const currentAnswers = answers[currentType.value.id]
  for (const question of currentQuestions.value) {
    if (!currentAnswers[question.id] || currentAnswers[question.id] === 0) {
      return false
    }
  }
  
  return true
}

// 进入下一个体质测试
function nextType() {
  if (!isCurrentTypeCompleted()) {
    uni.showToast({
      title: '请完成所有问题的回答',
      icon: 'none'
    })
    return
  }

  if (currentTypeIndex.value < constitutionTypes.length - 1) {
    currentTypeIndex.value++
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  } else {
    // 所有问卷都回答完毕，计算结果
    calculateResults()
  }
}

// 返回上一个体质测试
function prevType() {
  if (currentTypeIndex.value > 0) {
    currentTypeIndex.value--
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
}

// 计算原始分数
function calculateRawScore(typeId) {
  let score = 0
  const typeQuestions = questionsList[typeId]
  
  for (const q of typeQuestions) {
    let value = answers[typeId][q.id] || 0
    
    // 如果是逆向计分项，需要转换分值
    if (q.inverse) {
      value = 6 - value
    }
    
    score += value
  }
  
  return score
}

// 计算转化分数
function calculateTransformedScore(typeId) {
  const rawScore = calculateRawScore(typeId)
  const questionsCount = questionsList[typeId].length
  return ((rawScore - questionsCount) / (questionsCount * 4)) * 100
}

// 计算所有体质类型的结果
function calculateResults() {
  constitutionResults.value = []
  tendencyConstitutions.value = []
  tendencyConstitution.value = null
  mainConstitutions.value = []
  mainConstitution.value = {}
  
  for (const type of constitutionTypes) {
    const transformedScore = calculateTransformedScore(type.id)
    const result = {
      id: type.id,
      name: type.name,
      score: Math.round(transformedScore),
      result: transformedScore >= 40 ? '是' : 
              transformedScore >= 30 ? '倾向是' : '否'
    }
    constitutionResults.value.push(result)
  }
  
  // 判断平和质
  const pingheScore = constitutionResults.value.find(r => r.id === 'pinghe').score
  const otherTypesAllBelow30 = constitutionResults.value
    .filter(r => r.id !== 'pinghe')
    .every(r => r.score < 30)
  
  const otherTypesAllBelow40 = constitutionResults.value
    .filter(r => r.id !== 'pinghe')
    .every(r => r.score < 40)
  
  if (pingheScore >= 60 && otherTypesAllBelow30) {
    constitutionResults.value.find(r => r.id === 'pinghe').result = '是'
    mainConstitution.value = constitutionResults.value.find(r => r.id === 'pinghe')
    mainConstitutions.value = [mainConstitution.value]
  } else if (pingheScore >= 60 && otherTypesAllBelow40) {
    constitutionResults.value.find(r => r.id === 'pinghe').result = '基本是'
    mainConstitution.value = constitutionResults.value.find(r => r.id === 'pinghe')
    mainConstitutions.value = [mainConstitution.value]
    
    // 寻找所有倾向体质 (30-40分之间)
    const tendencyTypes = constitutionResults.value
      .filter(r => r.id !== 'pinghe' && r.score >= 30 && r.score < 40)
      .sort((a, b) => b.score - a.score)
    
    if (tendencyTypes.length > 0) {
      tendencyConstitutions.value = tendencyTypes
      tendencyConstitution.value = tendencyTypes[0]
    }
  } else {
    // 不是平和质，所有得分≥40的均为主要体质，30-40之间均为倾向体质
    
    // 所有得分≥40的体质均为主体质
    const mainTypes = constitutionResults.value
      .filter(r => r.id !== 'pinghe' && r.score >= 40)
      .sort((a, b) => b.score - a.score)
    
    // 所有得分在30-40之间的均为倾向体质
    const tendencyTypes = constitutionResults.value
      .filter(r => r.id !== 'pinghe' && r.score >= 30 && r.score < 40)
      .sort((a, b) => b.score - a.score)
    
    if (mainTypes.length > 0) {
      // 有得分≥40的体质
      mainConstitutions.value = mainTypes
      mainConstitution.value = mainTypes[0]
      
      if (tendencyTypes.length > 0) {
        // 有得分在30-40之间的体质
        tendencyConstitutions.value = tendencyTypes
        tendencyConstitution.value = tendencyTypes[0]
      }
    } else if (tendencyTypes.length > 0) {
      // 如果没有分数≥40的体质，找出得分在30-40之间的体质的作为倾向体质
      tendencyConstitutions.value = tendencyTypes
      tendencyConstitution.value = tendencyTypes[0]
    } else {
      // 如果没有分数≥30的体质，找出分数最高的作为主体质
      // const allTypes = constitutionResults.value
      //   .filter(r => r.id !== 'pinghe')
      //   .sort((a, b) => b.score - a.score)
      
      // const highestScore = allTypes[0].score
      // const mainTypes = allTypes.filter(r => r.score === highestScore)
      // mainConstitutions.value = mainTypes
      // mainConstitution.value = mainTypes[0]
    }
  }
  
  showResult.value = true
  testCompleted.value = true
  
  // 计算完成后直接保存结果到本地存储
  saveTestResults()
  
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}

// 保存测试结果到本地存储
function saveTestResults() {
  try {
    const resultData = {
      results: constitutionResults.value,
      main: mainConstitution.value,
      mains: mainConstitutions.value,
      tendency: tendencyConstitution.value,
      tendencies: tendencyConstitutions.value,
      date: new Date().toISOString()
    }
    
    uni.setStorageSync('constitutionTestResult', resultData)
    console.log('测试结果已保存', resultData)
    return true
  } catch (e) {
    console.error('保存测试结果失败', e)
    return false
  }
}

// 获取事件通道
function getOpenerEventChannel() {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  if (currentPage && currentPage.$page && currentPage.$page.eventChannel) {
    return currentPage.$page.eventChannel
  }
  return null
}

// 完成测试，返回到健康指导页
function finishTest() {
  // 确保结果已经保存到本地存储
  try {
    if (testCompleted.value && mainConstitution.value && mainConstitution.value.id) {
      // 确保最新结果被保存
      const saveSuccess = saveTestResults()
      
      // 尝试通过事件通道通知上一页面
      try {
        const eventChannel = getOpenerEventChannel()
        if (eventChannel && eventChannel.emit) {
          eventChannel.emit('testCompleted', {
            success: saveSuccess,
            date: new Date().toISOString()
          })
        }
      } catch (evt_err) {
        console.error('发送事件通知失败', evt_err)
      }
      
      // 使用全局事件通知
      uni.$emit('constitution-test-completed', {
        success: true,
        date: new Date().toISOString()
      })
      
      // 返回上一页面
      setTimeout(() => {
        uni.navigateBack({
          success: function() {
            uni.showToast({
              title: '测试完成',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }, 300)
    } else {
      uni.showToast({
        title: '请先完成测试',
        icon: 'none'
      })
    }
  } catch (e) {
    console.error('完成测试时发生错误', e)
    uni.showToast({
      title: '保存结果失败，请重试',
      icon: 'none'
    })
  }
}

// 重新开始测试
function restartTest() {
  // 重置所有答案
  initializeAnswers()
  
  currentTypeIndex.value = 0
  showResult.value = false
  testCompleted.value = false
  constitutionResults.value = []
  mainConstitution.value = {}
  mainConstitutions.value = []
  tendencyConstitution.value = null
  tendencyConstitutions.value = []
  
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.progress-bar {
  margin-bottom: 30rpx;
  
  .progress-text {
    font-size: 30rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .progress-track {
    height: 16rpx;
    background-color: #e6e6e6;
    border-radius: 8rpx;
    overflow: hidden;
    
    .progress-fill {
      height: 100%;
      background-color: #1890ff;
      border-radius: 8rpx;
      transition: width 0.3s ease;
    }
  }
}

.type-description {
  padding: 20rpx;
  background-color: #e6f7ff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  border-left: 8rpx solid #1890ff;
  
  text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
  }
}

.questions-list {
  margin-bottom: 40rpx;
  
  .question-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .question-text {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .answer-options {
      .answer-option {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &.selected {
          .option-circle {
            border-color: #1890ff;
          }
        }
        
        .option-circle {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          border: 2rpx solid #999;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          
          .option-inner {
            width: 24rpx;
            height: 24rpx;
            border-radius: 50%;
            background-color: #1890ff;
          }
        }
        
        .option-text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  
  .prev-btn, .next-btn, .restart-btn, .finish-btn {
    width: 48%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
  
  .prev-btn {
    background-color: #f0f0f0;
    color: #666;
  }
  
  .next-btn, .finish-btn {
    background-color: #1890ff;
    color: #fff;
  }
  
  .restart-btn {
    background-color: #f0f0f0;
    color: #666;
  }
}

.result-header {
  margin-bottom: 30rpx;
  
  .result-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.main-result {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  text-align: center;
  
  .result-type {
    font-size: 30rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .result-name {
    font-size: 48rpx;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 20rpx;
  }
  
  .result-names {
    margin-bottom: 20rpx;
    
    .main-item {
      font-size: 36rpx;
      font-weight: bold;
      color: #1890ff;
      background-color: #e6f7ff;
      padding: 8rpx 24rpx;
      border-radius: 24rpx;
      margin: 0 10rpx;
      display: inline-block;
    }
  }
  
  .tendency-constitutions {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 15rpx;
    
    text {
      display: inline-block;
    }
    
    .tendency-list {
      margin-top: 10rpx;
      
      .tendency-item {
        background-color: #e6f7ff;
        color: #1890ff;
        padding: 6rpx 20rpx;
        border-radius: 20rpx;
        margin: 0 6rpx;
      }
    }
  }
}

.result-advice {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .advice-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20rpx;
  }
  
  .advice-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20rpx;
    
    &.main-advice {
      .main-advice-item {
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .main-name {
          font-weight: bold;
          margin-bottom: 8rpx;
          color: #1890ff;
          font-size: 30rpx;
        }
      }
    }
    
    &.tendency-advice {
      border-top: 1px solid #f0f0f0;
      padding-top: 20rpx;
      
      .tendency-title {
        font-weight: bold;
        margin-bottom: 15rpx;
        color: #333;
      }
      
      .tendency-advice-item {
        margin-bottom: 15rpx;
        padding-left: 20rpx;
        
        .tendency-name {
          font-weight: bold;
          margin-bottom: 5rpx;
          color: #1890ff;
        }
      }
    }
  }
}

.result-details {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .details-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20rpx;
  }
  
  .score-list {
    .score-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.highlight {
        background-color: #e6f7ff;
        margin: 0 -30rpx;
        padding: 20rpx 30rpx;
      }
      
      .score-name {
        font-size: 28rpx;
        color: #333;
        width: 40%;
      }
      
      .score-value {
        font-size: 28rpx;
        color: #1890ff;
        font-weight: bold;
        width: 30%;
        text-align: center;
      }
      
      .score-result {
        font-size: 28rpx;
        color: #333;
        width: 30%;
        text-align: right;
      }
    }
  }
}
</style>

